<template>
  <div :id="chartId" style="width:100%;height:100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'EchartAnnular',
    props: {
        chartId: { type: String, default: function() { return 'myCharts' } }, // 图表id，当一个页面多图表时需要传此参数
        title: { type: Object, default: function() { return { name: '', align: 'center', size: '15' } } }, // 展示title
        width: { type: String, default: 'auto' }, // 图表渲染时占容器的宽度
        left: { type: String, default: function() { return 'center' } }, // 图表左侧距离
        alldata: { type: Array, default: function() { return [{ name: '', value: '' }] } }, // 数据项
        formatter: { type: String, default: function() { return '{b}: {c}次' } }, // hover提示内容格式化 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        radius: { type: Array, default: function() { return ['55%', '70%'] } }, // 内圆半径 外圆半径 内圆半径为0时变成饼状图
        isLabel: { type: Boolean, default: function() { return false } }, // 是否展示标签提示信息
        isLabelLine: { type: Boolean, default: function() { return false } }, // 是否展示标签线
        labelAlign: { type: String, default: function() { return 'outside' } }, // outside 外侧 'inside''inner' 'inside' 'center' 内侧
        labelFormatter: { type: Function, default: null }, // 格式化标签展示内容
        labelLineLength: { type: Object, default: function() { return { length1: 15, length2: 0 } } }, // 标签线的长度length1：第一段引导线的长度  length2：第二段线引导线的长度
        labelBackgroundColor: { type: String, default: function() { return 'transparent' } },
        rich: { type: Object, default: function() { return {} } }, // 自定义标签展示内容处理
        color: { type: Array, default: function() { return [] } }, // 颜色
        graphicText: { type: String, default: function() { return '' } }, // 显示的文本块字符
        graphicType: { type: String, default: function() { return 'text' } }, // 显示的文本类型
        graphicLeft: { type: String, default: function() { return 'center' } }, // 对齐方式 可以是数字 百分比 center居中
        graphicTop: { type: String, default: function() { return 'middle' } }, // 对齐方式 可以是数字 百分比 middle居中
        graphicColor: { type: String, default: function() { return '#000' } }, // 文本快颜色
        graphicFontSize: { type: Number, default: function() { return 20 } }, // 文本块字体大小
        isLegend: { type: Boolean, default: function() { return false } }, // 是否显示图例
        legendLeft: { type: String, default: function() { return 'left' } }, // 图例位置 left center right
        legendTop: { type: String, default: function() { return 'top' } }, // 图例位置 top middle bottom
        legendOrient: { type: String, default: function() { return 'horizontal' } }, // 'horizontal' 'vertical'
        legendIcon: { type: String, default: function() { return 'rect' } }, // 'circle'圆点, 'rect'矩形, 'roundRect'圆角矩形, 'triangle'三角形, 'diamond'菱形, 'pin'针型, 'arrow'箭头, 'none' 支持图片链接例如'image://http://xxx.xxx.xxx/a/b.png'
        legendFormatter: { type: Function, default: null }, // 格式化图例展示字体
        legendTextStyle: { type: Object, default: function() { return {} } }, // 标签展示的字体样式
        circleCenter: { type: Array, default: function() { return ['50%', '50%'] } }, // 圆心在容器的位置第一项为横坐标 第二项纵坐标  可直接这只数字为绝对坐标
        textColor: { type: String, default: function() { return '#000' } }, // 字体颜色
        avoidLabelOverlap: { type: Boolean, default: function() { return true } }, // 是否启用防止标签重叠策略
        margin: { type: Object, default: function() { return { top: 10, right: '2%', bottom: 0, left: '2%' } } },
        alignTo: { type: String, default: function() { return 'edge' } }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        alldata(val) {
            this.creatEcharts()
        }
    },
    created() {
        window.addEventListener('resize', this.onresize)
        this.$bus.on('toggleClick', () => {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.onresize()
                })
            }, 300)
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onresize)
        this.$bus.off('toggleClick', this.onresize)
    },
    mounted() {
        this.creatEcharts()
        setTimeout(() => {
            this.onresize()
        }, 300)
    },
    methods: {
        creatEcharts() {
            const vessel = document.querySelector('#' + this.chartId)
            const myChart = echarts.init(vessel)
            this.myChart = myChart
            const option = {
                title: {
                    text: this.title.name,
                    left: this.title.align || 'center',
                    size: this.title.size || '15'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: this.formatter
                },
                grid: {
                    left: this.margin.left || '2%',
                    right: this.margin.right || '2%',
                    top: this.margin.top || 10,
                    bottom: this.margin.bottom || 0
                },
                legend: {
                    show: this.isLegend,
                    left: this.legendLeft,
                    top: this.legendTop,
                    align: 'left',
                    orient: this.legendOrient,
                    icon: this.legendIcon,
                    data: this.alldata,
                    textStyle: this.legendTextStyle,
                    formatter: '{name}'
                },
                series: [{
                    type: 'pie',
                    radius: this.radius,
                    avoidLabelOverlap: this.avoidLabelOverlap,
                    width: this.width,
                    left: this.width !== 'auto' ? this.left : 0,
                    label: {
                        show: this.isLabel,
                        position: this.labelAlign,
                        alignTo: this.alignTo,
                        color: '#333',
                        formatter: this.labelFormatter,
                        minMargin: 10,
                        edgeDistance: 10,
                        lineHeight: 15,
                        textStyle: {
                            color: this.textColor
                        },
                        rich: this.rich,
                        backgroundColor: this.labelBackgroundColor
                    },
                    labelLine: {
                        show: this.isLabelLine,
                        maxSurfaceAngle: 80,
                        normal: {
                            length: this.labelLineLength.length1,
                            length2: this.labelLineLength.length2
                        },
                        length: this.labelLineLength.length1,
                        length2: this.labelLineLength.length2
                    },
                    data: this.alldata,
                    color: this.color,
                    center: this.circleCenter
                }],
                graphic: {
                    type: this.graphicType,
                    left: this.graphicLeft,
                    top: this.graphicTop,
                    style: {
                        text: this.graphicText,
                        textAlign: 'center',
                        fill: this.graphicColor,
                        fontSize: this.graphicFontSize
                    }
                }
            }

            if (this.width !== 'auto') {
                option.series[0]['labelLayout'] = function(params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2
                    const points = params.labelLinePoints
                    if (points !== undefined) {
                        points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
                    }

                    return {
                        labelLinePoints: points
                    }
                }
            }
            if (this.legendFormatter !== null) {
                option.legend['formatter'] = this.legendFormatter
            }
            myChart.setOption(option, true)
        },
        onresize() {
            if (this.myChart !== null) {
                this.myChart.resize()
            }
        }
    }
}
</script>

<style scoped lang="scss">

</style>
